<template>
	<div class="wrapper" v-loading="loading">
		<el-card class="course_intro_wrapper">
			<template v-if="!isLearning">
				<course-info :data="courseData" :chapters="courseChapters"></course-info>
			</template>
			<template v-else>
				<course-learn :data="courseData" :chapters="courseChapters"></course-learn>
			</template>
		</el-card>
		<el-card class="course_data_wrapper" header="培训资源">
			<el-table class="hidden-xs-only" :data="courseFileList" style="width: 100%">
				<el-table-column label="缩略图" width="68">
					<template slot-scope="{ row }">
						<svg-icon :icon-name="row.des | fileTypeIcon" size="48" style="display: block"></svg-icon>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="资源名称" min-width="184" />
				<el-table-column label="资源大小" min-width="80">
					<template slot-scope="{ row }">
						{{ row.size | sizeFilter }}
					</template>
				</el-table-column>
				<el-table-column prop="des" label="资源类型" min-width="80" />
				<el-table-column prop="createTime" label="创建时间" min-width="160" />
				<el-table-column label="操作" width="132">
					<el-button-group slot-scope="{ row }">
						<el-button size="mini" type="success" @click="handlePreviewFile(row)">预览</el-button>
						<el-button size="mini" type="warning" @click="handleDownloadFile(row)">下载</el-button>
					</el-button-group>
				</el-table-column>
			</el-table>
			<div class="hidden-sm-and-up">
				<template v-for="(item, index) in courseFileList">
					<file-item :data="item" @preview="handlePreviewFile(item)" @download="handleDownloadFile(item)"></file-item>
				</template>
			</div>
		</el-card>
	</div>
</template>

<script>
import courseInfo from './info';
import courseLearn from './learn';
import fileItem from './fileItem';
import fileFormat from '@/utils/fileFormat';
import { queryCourseListData, getCourseChapter } from '@/api/openApi';
export default {
	consts: ['REVIEW_SWITCH'],
	components: { courseInfo, courseLearn, fileItem },
	data() {
		return {
			loading: false,
			courseData: {},
			courseChapters: []
		};
	},
	computed: {
		courseId() {
			return this.$route.params.id || '';
		},
		isComment() {
			let dict = this.dictData['REVIEW_SWITCH'];
			return !!dict && dict === '1';
		},
		isLearning() {
			return !!this.$route.query.type;
		},
		courseFileList() {
			return this.courseData?.sysCourseFiles || [];
		}
	},
	watch: {
		courseId: {
			async handler(id) {
				this.loading = true;
				await this.getCourseDetail(id);
				await this.getCourseChapter(id);
				this.loading = false;
			},
			immediate: true
		}
	},
	methods: {
		//获取课程详情
		async getCourseDetail(id) {
			let params = { page: 1, limit: 1, id };
			let result = await queryCourseListData(params).then((res) => res.data);
			if (result.code === '0') {
				this.courseData = this.$detailData(result.data);
			}
		},

		//获取课程章节
		async getCourseChapter(courseId) {
			let params = { page: 1, limit: 999, pid: 0, courseId };
			let result = await getCourseChapter(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = result.data || [];
				this.courseChapters = this.$treeAddedSort(datas, 'childList');
			}
		},

		//预览文件
		handlePreviewFile(data) {
			let typeData = fileFormat.find((n) => n.value.inArray(data.des));
			this.$bus.$emit('filePreview', data, typeData.type);
		},

		//下载文件
		async handleDownloadFile(data) {
			let httpUrl = data.sysAttachment?.httpUrl;
			this.$fileDownload(httpUrl?.replaceIP(), data.name, {});
		}
	}
};
</script>

<style lang="scss" scoped>
.course_intro_wrapper::v-deep {
	margin-top: 10px;
	.el-card__body {
		padding: 0;
	}
}
.course_data_wrapper::v-deep {
	margin-top: 10px;
	.el-card__header {
		display: flex;
		font-size: 18px;
		line-height: 1;
		font-weight: bold;
		overflow: hidden;
		&::before {
			width: 3px;
			content: '';
			margin-right: 10px;
			background-color: var(--primary);
		}
	}
	.el-table {
		border: solid 1px #ebeef5;
		border-bottom: none;
	}
	th.el-table__cell {
		font-size: 14px;
		line-height: 1;
		background-color: var(--primary-background-disabled);
		.cell {
			color: #606266;
			line-height: 1;
		}
	}
}
@media (min-width: 992px) {
	.course_intro_wrapper::v-deep {
		margin-top: 36px;
	}
	.course_data_wrapper::v-deep {
		margin-top: 36px;
		.el-card__body {
			display: flex;
		}
	}
}
</style>
